<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hello</title>
</head>
<body>
	<!-- 准备好容器 -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>

	<!-- 引入react核心库，引入后全局多了一个React对象 -->
	<script src="../lib/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作dom，引入后全局多了一个ReactDOM对象 -->
	<script src="../lib/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script src="../lib/babel.min.js"></script>
  <!-- 引入prop-types，用于对组件标签属性进行限制，引入后全局多了一个PropTypes对象 -->
  <script src="../lib/prop-types.js"></script>

	<script type="text/babel">
		
    class Person extends React.Component{
      // 对标签属性进行类型限制
      static propTypes = {
        name: PropTypes.string.isRequired, // 限制name必传，且为字符串
        sex: PropTypes.string,
        age: PropTypes.number,
        speak: PropTypes.func, // 限制speak为函数
      }
      // 指定默认标签属性值
      static defaultProps = {
        sex: '女',
        age: 18
      }
      // 初始化状态
      state = {
        isHot: false
      }
      render() {
        return (
          <ul>
            <li>姓名：{this.props.name}</li>
            <li>性别：{this.props.sex}</li>
            <li>年龄：{this.props.age+1}</li>
          </ul>
        )
      }
    }
    

		// 2.渲染虚拟DOM到页面
		ReactDOM.render(<Person name="tome" sex="男" age={19} speak={speak}/>, document.getElementById('test1'));

    const p1 = {name: '老刘', sex: '女', age: 18}
		ReactDOM.render(<Person name={p1.name} sex={p1.sex} age={p1.age}/>, document.getElementById('test2'));
		
    // 注：这儿的...p2不是原生js语法，而是babel+react提供的语法糖，只能在标签中使用
    const p2 = {name: 'Dawei', sex: '女', age: 18}
    ReactDOM.render(<Person {...p2}/>, document.getElementById('test3'));

    function speak() {
      console.log('说话');
    }
	</script>
</body>
</html>